---
title: Editable
description: "`Editable`は、インラインで編集可能なテキスト入力を取得するために使用されるコンポーネントです。"
storybook: components-editable--basic
source: components/editable
style: components/editable/editable.style.ts
---

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！">
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

## 使い方

:::code-group

```tsx [package]
import { Editable } from "@yamada-ui/react"
```

```tsx [alias]
import { Editable } from "@/components/ui"
```

```tsx [monorepo]
import { Editable } from "@workspaces/ui"
```

:::

```tsx
<Editable.Root>
  <Editable.Preview />
  <Editable.Input />
  <Editable.Textarea />
  <Editable.Control>
    <Editable.EditTrigger />
    <Editable.SubmitTrigger />
    <Editable.CancelTrigger />
  </Editable.Control>
</Editable.Root>
```

### テキストエリアを使う

```tsx preview
<Editable.Root defaultValue={`おやつ…って事!?\nそれって最高じゃん!!`}>
  <Editable.Preview />
  <Editable.Textarea />
</Editable.Root>
```

### 編集モードをデフォルトにする

編集モードをデフォルトにする場合は、`startWithEditView`を`true`に設定します。

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！" startWithEditView>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### フォーカスが外れた場合に変更を確定しない

フォーカスが外れた場合に変更を確定しない場合は、`submitOnBlur`を`false`に設定します。

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！" submitOnBlur={false}>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### フォーカス時に選択しない

フォーカス時にテキストを選択しない場合は、`selectAllOnFocus`を`false`に設定します。

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！" selectAllOnFocus={false}>
  <Editable.Preview />
  <Editable.Input />
</Editable.Root>
```

### ボーダーの色を変更する

ボーダーの色を変更する場合は、`focusBorderColor`または`errorBorderColor`に値を設定します。

```tsx preview
<VStack>
  <Editable.Root
    defaultValue="Custom focus border color"
    focusBorderColor="green.500"
  >
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Editable.Root
    defaultValue="Custom error border color"
    errorBorderColor="orange.500"
    invalid
  >
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>
</VStack>
```

### 無効にする

無効にする場合は、`disabled`を`true`に設定します。

```tsx preview
<VStack>
  <Editable.Root defaultValue="Your email address" disabled>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    disabled
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### 読み取り専用にする

読み取り専用にする場合は、`readOnly`を`true`に設定します。

```tsx preview
<VStack>
  <Editable.Root defaultValue="Your email address" readOnly>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    readOnly
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### 無効な入力にする

無効な入力にする場合は、`invalid`を`true`に設定します。

```tsx preview
<VStack>
  <Editable.Root defaultValue="Your email address" invalid>
    <Editable.Preview />
    <Editable.Input />
  </Editable.Root>

  <Field.Root
    invalid
    helperMessage="We'll never share your email."
    label="Email address"
  >
    <Editable.Root defaultValue="Your email address">
      <Editable.Preview />
      <Editable.Input />
    </Editable.Root>
  </Field.Root>
</VStack>
```

### 制御する

```tsx preview
<Editable.Root defaultValue="なんとかなれーッ！">
  <Editable.Preview />
  <Editable.Input />

  <Editable.Control>
    <Editable.EditTrigger>
      <IconButton
        size="xs"
        variant="ghost"
        aria-label="Edit"
        icon={<PencilIcon />}
      />
    </Editable.EditTrigger>
    <Editable.SubmitTrigger>
      <IconButton
        size="xs"
        variant="outline"
        aria-label="Submit"
        icon={<CheckIcon />}
      />
    </Editable.SubmitTrigger>
    <Editable.CancelTrigger>
      <IconButton
        size="xs"
        variant="outline"
        aria-label="Cancel"
        icon={<XIcon />}
      />
    </Editable.CancelTrigger>
  </Editable.Control>
</Editable.Root>
```

### 制御をカスタマイズする

```tsx preview functional client
const CustomControls = () => {
  const { getCancelProps, getEditProps, getSubmitProps } = Editable.useContext()
  return (
    <ButtonGroup.Root size="xs">
      <ButtonGroup.IconItem
        icon={<PencilIcon />}
        {...getEditProps()}
        variant="ghost"
        aria-label="Edit"
      />

      <ButtonGroup.IconItem
        icon={<CheckIcon />}
        {...getSubmitProps()}
        variant="outline"
        aria-label="Submit"
      />

      <ButtonGroup.IconItem
        icon={<XIcon />}
        {...getCancelProps()}
        variant="outline"
        aria-label="Cancel"
      />
    </ButtonGroup.Root>
  )
}

return (
  <Editable.Root defaultValue="なんとかなれーッ！" previewFocusable={false}>
    <Editable.Preview />
    <Editable.Input />
    <CustomControls />
  </Editable.Root>
)
```

## Props

<PropsTable name="editable" />

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。
